<template>
	<div id="page">
		<img class="page-bg" src="../../assets/url_bg.jpg" >
		
		<div class="main">
			<div @click="navLeft()" class="fanhui iconfont">&#xe627;</div>
				
			<img class="logo" src="../../assets/logo3.jpg">
			<h1 class="h1">coinbtc</h1>
			<div class="tit">{{$t('page.Invitation_link')}}</div>
			<p class="url" :class="copy ? 'on' : '' " >{{url}}</p>
			
			<div class="btn btn-c-lan" @click="onCopy()" >{{$t('page.Copy_link')}}</div>
			<div @click="navLeft()" class="btn on">{{$t('page.Go_back')}}</div>
			
		</div>
	</div>
</template>

<script>
	import { mapState } from "vuex";
	import store from '@/store'
	 import Web3 from "web3";
	
	export default {
		name:"invite",
		data() {
			return {
				copy:false,
				url:'',
				address:''
			}
		},
		mounted() {
			this.init()
		},
	
		methods: {
			async init(){
				await this.$dapp.init("0x1", Web3);
				await this.$dapp.enabled();
				
				this.address = this.$dapp.getAddress()
				this.UserInfo(this.address);
			},
			navLeft(){
				 this.$router.go(-1);//返回上一层
			},
			async UserInfo(e) {
				console.log(e);
				const {err,res} = await this.$request.get("/chss/user/basic_info", {
					address: e,
					invite_code:this.invite_code
				});
				if (err === null) {
					this.url = res.invite_url;
				}
			},
			async onCopy(text) {
				let target = document.createElement('input') //创建input节点
				target.className = 'copyindex'
				target.value = this.url; // 给input的value赋值
				document.body.appendChild(target) // 向页面插入input节点
				target.select() // 选中input
				try {
					await document.execCommand('Copy') // 执行浏览器复制命令
					console.log('复制成功')
					this.copy = true;
				} catch {
					console.log('复制失败')
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{overflow: scroll;}
	.page-bg{height: 100%;}
	.fanhui{
		position: absolute; z-index: 999; top:30px; left:30px;
		font-size: 50px; color:#FFF;
	}
	.main{
		text-align: center;
	
		.logo{width: 250px; margin-top: 250px; border-radius:50%; }
		
		.h1{font-size: 60px; font-weight: 300;  }
		
		.tit{margin: 30px; font-size: 40px; font-weight: 300px; }
		
		.url{margin: 30px 100px; text-align: left; line-height: 60px; color:#eee;
			word-wrap:break-word; word-break:break-all;padding:10px 30px; border-radius:10px;

			&.on{
				border: 2px solid #FFF; 
			}
		 }
		
		.btn{
			width: 400px; height:80px; line-height: 80px;  margin: 50px auto;
			border-radius: 50px; text-align: center; font-size: 35px;
			&.on{background: #FFF; border:2px solid #07ACCA; color:#333; box-sizing: border-box;}
		}
	}
	
	
</style>
